<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="bootstrap-4.6.1-dist/css/bootstrap-grid.css" rel="stylesheet" />
    <link rel="stylesheet" href="bootstrap-4.6.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap-4.6.1-dist/css/bootstrap.css">
    <link href="css/user.css" rel="stylesheet">
    <title>Document</title>
</head>

<body>
    <div class="container-fulid">
        <nav class="row navbar">
            <div class="col-md-12 header">
                <div class="col-md-3 header-left">
                    <div style="margin-top: 10px;">
                        <a href="Index.html">
                            <img src="Image/Logo.png" title="页面首页" alt="">
                        </a>
                    </div>

                    <div>
                        <ul>
                            <li>
                                <a href="#">博客</a>
                            </li>

                            <li>
                                <a href="#">学习</a>
                            </li>

                            <li>
                                <a href="#">问答</a>
                            </li>

                            <li>
                                <a href="#">社区</a>
                            </li>

                            <li>
                                <a href="#">插件</a>
                            </li>

                            <li>
                                <a href="#">开源</a>
                            </li>
                        </ul>
                    </div>

                </div>

                <div class="col-md-4 offset-md-1 header-middle">
                    <div class="input-group">
                        <input type="text" placeholder="请输入搜索内容">
                        <button>搜索</button>
                    </div>
                </div>

                <div class="col-md-3 offset-md-auto header-right">
                    <div>
                        <a href="Login.html">登录/注册</a>
                    </div>

                    <div>
                        <a href="#">浏览记录</a>
                    </div>

                    <div>
                        <a href="#">动态</a>
                    </div>

                    <div>
                        <a href="#">创作</a>
                    </div>

                </div>
            </div>
        </nav>
    </div>

    <div class="container-lg userInfo">
        <div class="row">
            <div class="col-md-2 userList">
                <ul>
                    <li class="onceInfo">
                        <a href="javascript:void">个人资料</a>
                    </li>
                    <li class="accSet">
                        <a href="javascript:void">账户设置</a>
                    </li>

                    <li class="myArticle">
                        <a href="javascript:void">我的贴子</a>
                    </li>
            </div>

            <div class="col-md-9 user-cz" style="margin-left: 14px; background-color: #ffffff;">
                <div class="row">
                    <div class="col-md-2 onceUser-img">
                        <img src="/Image/UserDefaultHead.png" alt="">
                    </div>

                    <div class="col-md-10 user-details">
                        <div>
                            <span>冰阔落吖</span>
                        </div>
                    </div>
                </div>

                <div class="row" style="height: 10px; background-color: #f0f0f0;"></div>

                <div class="row">
                    <div class="col-md-12 jbInfo">
                        <!-- -->
                        <!-- <div class="row" style="border-bottom: 1px solid #e8e8ed;">
                            <div class="col-md-12 jbInfo-show">
                                <div class="user-jbInfo">
                                    <span>基本信息</span>
                                </div>

                                <div class="update-info">
                                    <a href="javascript:void">
                                        <span>编辑</span>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="row Infojg">
                            <div class="col-md-12">
                                <div class="user-jb-info">
                                    <div class="row">
                                        <div class="col-md-2">
                                            <span>用户昵称</span>
                                        </div>

                                        <div class="col-md-4 ">
                                            <input type="text" name="" id="" placeholder="未填写" readonly>
                                        </div>
                                    </div>
                                </div>

                                <div class="user-jb-info">
                                    <div class="row">
                                        <div class="col-md-2">
                                            <span>真实姓名</span>
                                        </div>

                                        <div class="col-md-10">
                                            <input type="text" name="" id="" placeholder="未填写" readonly>
                                        </div>
                                    </div>
                                </div>

                                <div class="user-jb-info">
                                    <div class="row">
                                        <div class="col-md-2">
                                            <span>出生日期</span>
                                        </div>

                                        <div class="col-md-10">
                                            <input type="text" name="" id="" placeholder="未填写" readonly>
                                        </div>
                                    </div>
                                </div>

                                <div class="user-jb-info">
                                    <div class="row">
                                        <div class="col-md-2">
                                            <span>性别</span>
                                        </div>

                                        <div class="col-md-10">
                                            <input type="text" name="" id="" placeholder="未填写" readonly>
                                        </div>
                                    </div>
                                </div>

                                <div class="user-jb-info">
                                    <div class="row">
                                        <div class="col-md-2">
                                            <span>微信号</span>
                                        </div>

                                        <div class="col-md-10">
                                            <input type="text" name="" id="" placeholder="未填写" readonly>
                                        </div>
                                    </div>
                                </div>

                                <div class="user-jb-info">
                                    <div class="row">
                                        <div class="col-md-2">
                                            <span>手机号</span>
                                        </div>

                                        <div class="col-md-10">
                                            <input type="text" name="" id="" placeholder="未填写" readonly>
                                        </div>
                                    </div>
                                </div>

                                <div class="user-jb-info">
                                    <div class="row">
                                        <div class="col-md-2">
                                            <span>家庭住址</span>
                                        </div>

                                        <div class="col-md-10">
                                            <input type="text" name="" id="" placeholder="未填写" readonly>
                                        </div>
                                    </div>
                                </div>

                                <div class="user-jb-info">
                                    <div class="row">
                                        <div class="col-md-2">
                                            <span>头像</span>
                                        </div>

                                        <div class="col-md-10">
                                            <input type="text" name="" id="" placeholder="未填写" readonly>
                                        </div>
                                    </div>
                                </div>

                                <div class="user-jb-info">
                                    <div class="row">
                                        <div class="col-md-2">
                                            <span>余额</span>
                                        </div>

                                        <div class="col-md-10">
                                            <input type="text" name="" id="" placeholder="未填写" readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> -->
                    </div>

                    <div class="col-md-12 user-set">
                        <!-- <div class="row" style="border-bottom: 1px solid #e8e8ed;">
                            <div class="col-md-12 jbInfo-show">
                                <div class="user-jbInfo">
                                    <span>基本信息</span>
                                </div>

                                <div class="update-info">
                                    <a href="javascript:void">
                                        <span>编辑</span>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="user-jb-info">
                                    <div class="row">
                                        <div class="col-md-2">
                                            <span>微信号</span>
                                        </div>

                                        <div class="col-md-10">
                                            <input type="text" name="" id="" placeholder="未填写" readonly>
                                        </div>
                                    </div>
                                </div>

                                <div class="user-jb-info">
                                    <div class="row">
                                        <div class="col-md-2">
                                            <span>手机号</span>
                                        </div>

                                        <div class="col-md-10">
                                            <input type="text" name="" id="" placeholder="未填写" readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> -->
                    </div>


                    <div class="col-md-12 user-article">
                        <!-- <div class="row" style="border-bottom: 1px solid #e8e8ed;">
                            <div class="col-md-12 jbInfo-show">
                                <div class="user-jbInfo">
                                    <span>发布文章</span>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12" style="padding:0; border-bottom: solid 1px #E8E8ED;">
                                <div class="article-box">
                                    <a href="article.html" class="article-title-link">
                                        <div class="article-title">
                                            <span>这里是文章标题</span>
                                        </div>
                                    </a>

                                    <a href="article.html" class="article-details-link">
                                        <div class="row">
                                            <div class="col-md-2">
                                                <img src="/Image/default.png" alt="" width="120px" height="60px">
                                            </div>

                                            <div class="col-md-10" style="padding: 0;">
                                                <div class="article-details">
                                                    <div class="col-md-10" style="padding: 0;">
                                                        <span>
                                                            前沿从本文开始进入了新阶段，学习初阶数据结构和算法，以纯C实现，本文主要学习时间复杂度与空间复杂度，内容包括:算法效率，时间复杂度，空间复杂度，常见时间和空间 复杂度的练习
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div> -->
                    </div>

                    <!-- <div class="col-md-12 user-article" style="display: none;">
                        <div class="row">
                            <div class="col-md-12" style="padding:0; border-bottom: solid 1px #E8E8ED;">
                                <div class="article-box">
                                    <a href="article.html" class="article-title-link">
                                        <div class="article-title">
                                            <span>这里是文章标题</span>
                                        </div>
                                    </a>

                                    <a href="article.html" class="article-details-link">
                                        <div class="row">
                                            <div class="col-md-2">
                                                <img src="/Image/default.png" alt="" width="120px" height="60px">
                                            </div>

                                            <div class="col-md-10" style="padding: 0;">
                                                <div class="article-details">
                                                    <div class="col-md-10" style="padding: 0;">
                                                        <span>
                                                            前沿从本文开始进入了新阶段，学习初阶数据结构和算法，以纯C实现，本文主要学习时间复杂度与空间复杂度，内容包括:算法效率，时间复杂度，空间复杂度，常见时间和空间 复杂度的练习
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div> -->

                </div>
            </div>
        </div>
    </div>
    </div>


    <script src="bootstrap-4.6.1-dist/js/jquery.js"></script>
    <script src="bootstrap-4.6.1-dist/js/bootstrap.js"></script>
    <script>
        $(document).ready(function() {
            $(".onceInfo").css("background", "#f0f0f5");
            var str = "";
            str += "<div class='row' style='border-bottom: 1px solid #e8e8ed;'>";
            str += "<div class='col-md-12 jbInfo-show'>";
            str += "<div class='user-jbInfo'>";
            str += "<span>基本信息</span>";
            str += "</div>";
            str += "<div class='update-info'>";
            str += "<a href='javascript:void'>";
            str += "<span>编辑</span>";
            str += "</a>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "<div class='row Infojg'>";
            str += "<div class='col-md-12'>";
            str += "<div class='user-jb-info'>";
            str += "<div class='row'>";
            str += "<div class='col-md-2'>";
            str += "<span>用户昵称</span>";
            str += "</div>";
            str += "<div class='col-md-4'>";
            str += "<input type='text' name='' id='' placeholder='未填写' readonly>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "<div class='user-jb-info'>";
            str += "<div class='row'>";
            str += "<div class='col-md-2'>";
            str += "<span>真实姓名</span>";
            str += "</div>";
            str += "<div class='col-md-10'>";
            str += "<input type='text' name='' id='' placeholder='未填写' readonly>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "<div class='user-jb-info'>";
            str += "<div class='row'>";
            str += "<div class='col-md-2'>";
            str += "<span>出生日期</span>";
            str += "</div>";
            str += "<div class='col-md-10'>";
            str += "<input type='text' name='' id='' placeholder='未填写' readonly>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "<div class='user-jb-info'>";
            str += "<div class='row'>";
            str += "<div class='col-md-2'>";
            str += "<span>性别</span>";
            str += "</div>";
            str += "<div class='col-md-10'>";
            str += "<input type='text' name='' id='' placeholder='未填写' readonly>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "<div class='user-jb-info'>";
            str += "<div class='row'>";
            str += "<div class='col-md-2'>";
            str += "<span>微信号</span>";
            str += "</div>";
            str += "<div class='col-md-10'>";
            str += "<input type='text' name='' id='' placeholder='未填写' readonly>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "<div class='user-jb-info'>";
            str += "<div class='row'>";
            str += "<div class='col-md-2'>";
            str += "<span>手机号</span>";
            str += "</div>";
            str += "<div class='col-md-10'>";
            str += "<input type='text' name='' id='' placeholder='未填写' readonly>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "<div class='user-jb-info'>";
            str += "<div class='row'>";
            str += "<div class='col-md-2'>";
            str += "<span>家庭住址</span>";
            str += "</div>";
            str += "<div class='col-md-10'>";
            str += "<input type='text' name='' id='' placeholder='未填写' readonly>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "<div class='user-jb-info'>";
            str += "<div class='row'>";
            str += "<div class='col-md-2'>";
            str += "<span>头像</span>";
            str += "</div>";
            str += "<div class='col-md-10'>";
            str += "<input type='text' name='' id='' placeholder='未填写' readonly>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "<div class='user-jb-info'>";
            str += "<div class='row'>";
            str += "<div class='col-md-2'>";
            str += "<span>余额</span>";
            str += "</div>";
            str += "<div class='col-md-10'>";
            str += "<input type='text' name='' id='' placeholder='未填写' readonly>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            $(".jbInfo").html(str);
        });

        $(".onceInfo").click(function() {
            $(".user-set").empty();
            $(".user-article").empty();
            // $(".onceInfo").css("background", "#f0f0f5");
            var str = "";
            str += "<div class='row' style='border-bottom: 1px solid #e8e8ed;'>";
            str += "<div class='col-md-12 jbInfo-show'>";
            str += "<div class='user-jbInfo'>";
            str += "<span>基本信息</span>";
            str += "</div>";
            str += "<div class='update-info'>";
            str += "<a href='javascript:void'>";
            str += "<span>编辑</span>";
            str += "</a>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "<div class='row Infojg'>";
            str += "<div class='col-md-12'>";
            str += "<div class='user-jb-info'>";
            str += "<div class='row'>";
            str += "<div class='col-md-2'>";
            str += "<span>用户昵称</span>";
            str += "</div>";
            str += "<div class='col-md-4'>";
            str += "<input type='text' name='' id='' placeholder='未填写' readonly>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "<div class='user-jb-info'>";
            str += "<div class='row'>";
            str += "<div class='col-md-2'>";
            str += "<span>真实姓名</span>";
            str += "</div>";
            str += "<div class='col-md-10'>";
            str += "<input type='text' name='' id='' placeholder='未填写' readonly>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "<div class='user-jb-info'>";
            str += "<div class='row'>";
            str += "<div class='col-md-2'>";
            str += "<span>出生日期</span>";
            str += "</div>";
            str += "<div class='col-md-10'>";
            str += "<input type='text' name='' id='' placeholder='未填写' readonly>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "<div class='user-jb-info'>";
            str += "<div class='row'>";
            str += "<div class='col-md-2'>";
            str += "<span>性别</span>";
            str += "</div>";
            str += "<div class='col-md-10'>";
            str += "<input type='text' name='' id='' placeholder='未填写' readonly>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "<div class='user-jb-info'>";
            str += "<div class='row'>";
            str += "<div class='col-md-2'>";
            str += "<span>微信号</span>";
            str += "</div>";
            str += "<div class='col-md-10'>";
            str += "<input type='text' name='' id='' placeholder='未填写' readonly>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "<div class='user-jb-info'>";
            str += "<div class='row'>";
            str += "<div class='col-md-2'>";
            str += "<span>手机号</span>";
            str += "</div>";
            str += "<div class='col-md-10'>";
            str += "<input type='text' name='' id='' placeholder='未填写' readonly>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "<div class='user-jb-info'>";
            str += "<div class='row'>";
            str += "<div class='col-md-2'>";
            str += "<span>家庭住址</span>";
            str += "</div>";
            str += "<div class='col-md-10'>";
            str += "<input type='text' name='' id='' placeholder='未填写' readonly>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "<div class='user-jb-info'>";
            str += "<div class='row'>";
            str += "<div class='col-md-2'>";
            str += "<span>头像</span>";
            str += "</div>";
            str += "<div class='col-md-10'>";
            str += "<input type='text' name='' id='' placeholder='未填写' readonly>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "<div class='user-jb-info'>";
            str += "<div class='row'>";
            str += "<div class='col-md-2'>";
            str += "<span>余额</span>";
            str += "</div>";
            str += "<div class='col-md-10'>";
            str += "<input type='text' name='' id='' placeholder='未填写' readonly>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            $(".jbInfo").html(str);
        });

        $(".accSet").click(function() {
            $(".jbInfo").empty();
            $(".user-article").empty();
            var str = "";
            str += "<div class='row' style='border-bottom: 1px solid #e8e8ed;'>";
            str += "<div class='col-md-12 jbInfo-show'>";
            str += "<div class='user-jbInfo'>";
            str += "<span>账号设置</span>";
            str += "</div>";
            str += "<div class='update-info'>";
            str += "<a href='javascript:void'>";
            str += "<span>编辑</span>";
            str += "</a>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "<div class='row Infojg'>";
            str += "<div class='col-md-12'>";
            str += "<div class='user-jb-info'>";
            str += "<div class='row'>";
            str += "<div class='col-md-2'>";
            str += "<span>微信号</span>";
            str += "</div>";
            str += "<div class='col-md-4'>";
            str += "<input type='text' name='' id='' placeholder='未填写' readonly>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "<div class='user-jb-info'>";
            str += "<div class='row'>";
            str += "<div class='col-md-2'>";
            str += "<span>手机号</span>";
            str += "</div>";
            str += "<div class='col-md-10'>";
            str += "<input type='text' name='' id='' placeholder='未填写' readonly>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            $(".user-set").html(str);
        });
        $(".myArticle").click(function() {
            $(".jbInfo").empty();
            $(".user-set").empty();
            var str = "";
            str += "<div class='row' style='border-bottom: 1px solid #e8e8ed;'>";
            str += "<div class='col-md-12 jbInfo-show'>";
            str += "<div class='user-jbInfo'>";
            str += "<span>发布文章</span>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "<div class='row'>";
            str += "<div class='col-md-12' style='padding:0; border-bottom: solid 1px #E8E8ED;'>";
            str += "<div class='article-box'>";
            str += "<a href='article.html' class='article-title-link'>";
            str += "<div class='article-title'>";
            str += "<span>这里是文章标题</span>";
            str += "</div>";
            str += "</a>";
            str += "<a href='article.html' class='article-details-link'>";
            str += "<div class='row'>";
            str += "<div class='col-md-2'>";
            str += "<img src='/Image/default.png' alt='' width='120px' height='60px'>";
            str += "</div>";
            str += "<div class='col-md-10' style='padding: 0;''>";
            str += "<div class='article-details'>";
            str += "<div class='col-md-10' style='padding: 0;'>";
            str += "<span>前沿从本文开始进入了新阶段，学习初阶数据结构和算法，以纯C实现，本文主要学习时间复杂度与空间复杂度，内容包括:算法效率，时间复杂度，空间复杂度，常见时间和空间 复杂度的练习</span>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            str += "</a>";
            str += "</div>";
            str += "</div>";
            str += "</div>";
            $(".user-article").html(str);
        });

        $(".userList li").click(function() {
            $(this).siblings().css("background", "");
            $(this).css("background", "#f0f0f5");
        })
    </script>
</body>

</html>